<template>
    <div ref="refLine"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Line } from '@antv/g2plot'
import data from './data.json'

const refLine = ref<HTMLElement>()
const linePlot = ref<Line>()
function LineRender() {
    if (!refLine.value) return
    linePlot.value = new Line(refLine.value, {
        data,
        autoFit: true,
        xField: 'date',
        yField: 'value',
        seriesField: 'type',
        lineStyle: {
            lineWidth: 4,
        },
        area: {
            style: {
                fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
            },
        },
        smooth: true,
        animation: {
            appear: {
                animation: 'wave-in',
                duration: 2000,
            },
        },
    })
    linePlot.value.render()
}
onMounted(() => {
    LineRender()
})
</script>